<template>
  <div :class="!iserror? 'app-content' :''" id="app">
    <div v-if="!iserror" id="app-login-help">
      <nav-bar :title="'客服'" />
      <div>
        <div class="charge-title">问题出现时间：<img src="../../assets/star.png" width="5px" height="5px">&nbsp; :</div>
        <div class="charge-order pay-time" ref="getPayat">
          <div class="content edit-input" @click='showDateTimePicker'>
            {{pay_at}}
          </div>
          <div class="right-arrow" @click='showDateTimePicker'><i class="cube-select-icon"></i></div>
        </div>
        <div>
          <p class="errorMessage" v-show='errorMessage.appear_at'>请选择问题出现时间</p>
        </div>
        <div class="charge-title">您的机型：<img src="../../assets/star.png" width="5px" height="5px">&nbsp; :</div>
        <cube-input class="pay-input w-65_" v-model="appealData.phone_model" placeholder="例如：Huawei P30"></cube-input>
        <div>
          <p class="errorMessage" v-show='errorMessage.phone_model'>请输入机型</p>
        </div>

        <div class="charge-title">网络状况：<img src="../../assets/star.png" width="5px" height="5px">&nbsp; :</div>
        <cube-radio-group class="pay-input" id="net-status" v-model="appealData.net" :options="net_type" :horizontal="true" />
        <!-- <cube-radio-group id="net-status" v-model="appealData.net" :options="net_type" :horizontal="true" /> -->
        <div>
          <p class="errorMessage" v-show='errorMessage.net'>请选择网络状况</p>
        </div>

        <div class="charge-title">您的联系方式：</div>
        <div id="contact-info">
          <cube-select id="contact-type" class="pay-input w-65_" v-model="appealData.contact_type" :options="contactType"></cube-select>
          <cube-input style="margin-left:0;" class="pay-input w-65_" v-model="appealData.contact_account" ></cube-input>
        </div>

        <div class="charge-title">问题详细描述：</div>
        <cube-textarea v-model="appealData.desc" placeholder="请详细描述您的问题，方便快速帮您解决哦～" class="pay-textarea" :maxlength="1000"></cube-textarea>

        <!-- <div>
          <p style="margin: 5px 5% 0px; color: red; font-size: 12px;" v-show='errorMessage.desc'>请填写问题详细描述</p>
        </div> -->
        <!-- <div>
          <p class="errorMessage" v-show='exa.desc'>问题详细描述不得少于10字</p>
        </div> -->
        <div class="charge-title">上传图片： </div>
        <!-- 图片上传 -->
        <div class="upload-box">
          <cube-upload class="cube-upload" v-model="uploadfiles" :max="3" :action="upAction" :auto="false" :simultaneous-uploads="1" @files-added="filesAdded" @file-submitted="filesSubmitted" @file-success="filesSuccess" @file-error="fileError" />
          <div class="upload">
          </div>
        </div>
        <div class="submit">
          <!-- <div>请确保以上信息填写无误，处理速度更快哦，<br> -->
            <!-- 结果请在<span class="color-Gold">客服</span>-><span class="color-Gold">反馈记录</span>中查看哟</div> -->
          <cube-button class="subbutton" @click="submitWorkOrder" :disabled="showLoading?true:false" >提交</cube-button>
        </div>
      </div>
      <div v-show='showLoading' class="showLoading">
        <cube-loading class="loading-div" :size="40"></cube-loading>
        <div class="loadingtext">{{loadingMsg}}</div>
      </div>
    </div>
    <error-page v-if="iserror" :iserror.sync="iserror"></error-page>
  </div>
</template>

<script>
const dateFormat = require('dateformat')
import { Cell, Button, DatetimePicker, Field, Popup, Uploader, Swipe, SwipeItem } from 'vant'
import NavBar from '@/components/customerService/NavBar.vue'
import error from '@/pages/error/App.vue'
import { submit_loginHelp, getQiniuUploadToken_loginHelp } from '@/api/login_help'
import * as qiniu from 'qiniu-js'
import { dataNullFilter, dataDescLengthFilter,ckDesc } from '@/utils/ckData'
import { uuid } from '@/utils/uuid'
import mixins from '@/model/mixins'


export default {
  mixins: [mixins],
  components: {
    NavBar,
    'error-page': error,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  watch: {
    'appealData.desc':function () {
      let desc=ckDesc(this.appealData.desc);
      this.appealData=Object.assign(this.appealData,{desc})
      this.$forceUpdate()
    }
  },
  data () {
    return {
      iserror: false,
      contactType: this.$store.state.app.contactType,
      appealData: {
        contact_type: 1
      },
      uploadfiles: [],
      pay_at: '',
      loadingMsg: '',
      upAction: {
        target: 'http://up-z2.qiniup.com',
        data: new FormData()
      },
      filename: [],
      errorMessage: {
        appear_at: false,
        phone_model: false,
        net: false,
      },
      showLoading: false,
      iserrordata: false,
      iserrorDescLength: false,
      exa: {
        desc: false,
      },
      net_type: [
        {
          label: 'WIFI',
          value: 0
        },
        {
          label: '4G',
          value: 1
        },
        {
          label: '3G',
          value: 2
        },
        {
          label: '2G',
          value: 3
        }
      ],
      filenameNew: []
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    filesSubmitted (f) {
      this.loadingMsg = "图片处理中"
      this.showLoading = true
      console.log('fi')
      let PicArr = f.file.name.split('.')
      let str1 = PicArr[PicArr.length - 1]
      getQiniuUploadToken_loginHelp().then(res => {
        console.log(res, 'get0')
        if (res.status === 0) {
          console.log('get')
          let data = new FormData()
          data.append('file', f.file)
          this.filename.push(`${uuid()}.${str1}`)
          data.append('key', this.filename[this.filename.length - 1])
          data.append('token', res.data.token)

          var observable = qiniu.upload(f.file, this.filename[this.filename.length - 1], res.data.token)
          let that = this

          var observer = {
            next (res) {
              //接收上传进度信息
              console.log(res, 999)
              that.loadingMsg = '图片处理中'+ parseInt(res.total.percent) + '%'
            },
            error (err) {
              //处理错误情况，提示用户该图片上传失败
              that.showLoading = false
              if (that.filename.length > 0) {
                that.filename.pop()
                that.fileError()
              }
            },
            complete (res) {
              //上传完成
              console.log('上传成功！',res)
              that.filenameNew.push(res.key)
              that.showLoading = false
            }
          }
          observable.subscribe(observer) // 上传开始
        }
      })
    },
    submitWorkOrder () {
      this.loadingMsg = "正在提交中..."
      this.appealData.images = this.filenameNew
      this.errorMessage = dataNullFilter(this.appealData, this.errorMessage, this);
      this.exa = dataDescLengthFilter(this.appealData, this.exa, this.errorMessage, this);
      this.$forceUpdate()
      if (this.iserrordata) {
        return;
      }
      // else if (this.iserrorDescLength) {
      //   console.log(this.iserrorDescLength, 'this.iserrorDescLength')
      //   return;
      // }
      else {
        this.showLoading = true
        Object.assign(this.appealData)
        submit_loginHelp(this.appealData).then(res => {
          if (res.status === 200) {
            this.showLoading = false
            location.href = `/success_login_help`
          }
        }).catch(error => {
          this.showLoading = false
          console.log(error)
          if(error.response.data.status==-400) {
            this.iserror=true
          }
        })
      }
    },
    selectHandle (date, selectedVal) {
      Object.assign(this.appealData, { appear_at: dateFormat(date, 'yyyy-mm-dd HH:MM:ss') })
      this.pay_at = dateFormat(date, 'yyyy-mm-dd HH:MM:ss')

    }
  },
  beforeDestroy () {
  },
}
</script>
<style lang="less">
// 此页新添加样式都在此
  #app-login-help {
    #net-status {
      padding-left: 0;
      font-size: 88%;
      border: 0 !important;
      .border-right-1px::after {
        border-right: 0;
      }
    }
    .border-right-1px::after {
      border-right: 0px !important;
    }
     .app-content .pay-time {
      width: 60%;
      padding: 0;
    }
    .cube-input-field {
      padding: 0;
    }
    #contact-info {
      display: flex;
      #contact-type {
        width: 27%;
      }
    }
    // #net-status .cube-radio-group[data-horz="true"] .cube-radio:after {
    //   border-color:white;
    //   border: 0;
    // }
    .cube-radio-group[data-horz="true"]::after {
      border: 0;
    }
    .cube-radio.border-right-1px {
      padding: 0;
      text-align: left;
    }
    // 全局scode拿不到生成的标签
    .cube-radio.border-right-1px::after {
      border-right: null;
    }
  }

</style>


